@charset "utf-8";
@import "reset";
.sub_brand_banner{
  height: 400px;
  .left{
    width: 322px;
    height: 352px;
    background:url("../image/sub_brand/form_bg.png")no-repeat center;
    background-size: cover;
    margin-top: 24px;
    .budget{
      background:url("../image/sub_brand/moeny.png")no-repeat left center;
      padding-left: 46px;
      margin-left: 24px;
      margin-top: 12px;
      margin-bottom: 11px;
      b{
        display: block;
        color:#fff;
        font-size: 24px;
      }
      small{
        display: block;
        color:#fff;
        font-size: 12px;
      }
    }
    .notice_tip{
      background:url("../image/sub_brand/notice.png")no-repeat left 9px top 11px;
      padding-left: 30px;
      padding-top: 3px;
    }
    .notice_wrapper{
      width: 90%;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
      .notice{
        color:#666666;
        font-size: 12px;
        padding-left: 26px;
        line-height: 34px;
        display: inline-block;
        @include one-line;
      }
    }
  }
  .right{
    width: 874px;
    height: 352px;
    img{@include needCover;}
  }
  .layui-form{
    background: #fff;
    width: 98%;
    margin: 0 auto;
    padding: 10px 0 0;
    .layui-form-select dl dd.layui-this{
      background: $color;
    }
    .layui-form-select dl{
      top:35px;
    }
    .layui-input-block {
      margin-left: 80px;
    }
    button{
      width: 95%;
      height: 40px;
      line-height: 40px;
      background: #FF4C53;
      border-radius: 6px;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      color: #fff;
      font-size: 18px;
    }
    input{
      height: 30px;
      line-height: 30px;
    }
    .layui-form-item{
      width: 95%;
      margin: 0 auto;
    }
    .layui-form-label{
      padding: 0;
      color: #333333;
      font-size: 15px;
      text-align: left;
      line-height: 30px;
    }
  }
}
.progress{
  margin-top: 34px;
  .progress_bg{
    background:url("../image/sub_brand/progress.png")no-repeat center;
    height: 120px;
    background-size: contain;
    .p1{
      color:#fff;
      font-size: 26px;
      font-weight: bolder;
      line-height: 120px;
      margin-left:28px;
      margin-right: 90px;
    }
    .p2{
      margin-top: 17px;
      ul{
        li{
          &:last-of-type{
            padding-right: 0;
            margin-right: 0;
            background: transparent;
          }
          text-align: center;
          background:url(../image/sub_brand/right.png)no-repeat right bottom 6px;
          padding-right: 28px;
          margin-right: 28px;
          p{
            img{
              width: 55px;
              height: 55px;
            }
          }
          span{
            display: block;
            color:#333333;
            font-size: 18px;
          }
        }
      }
    }
    .p3{
      margin-right: 24px;
      margin-top: 15px;
      .a1{
        color:#999999;
        font-size: 14px;
        padding-left: 10px;
        margin-bottom: 8px;
        margin-top: 5px;
        span{
          color:$color;
          font-size: 18px;
          padding-left: 5px;
          padding-right: 5px;
        }
      }
      form{
        width: 432px;
        height: 49px;
        @include clear;
        input{
          width: 295px;
          height: 47px;
          float: left;
          border-color:$color!important;
          border-top-left-radius:6px;
          border-bottom-left-radius:6px;
        }
        button{
          width:113px;
          height:47px;
          background:$color;
          border-color:$color;
          transition: all 0.3s;
          color:#fff;
          font-size: 16px;
          cursor: pointer;
          border-top-right-radius:6px;
          border-bottom-right-radius:6px;
          &:hover{
            opacity: 0.8;
          }
        }
      }
    }
  }
}
.public_title{
  margin-bottom: 25px;
  border-bottom:1px solid #E4E4E4;
  padding-bottom: 15px;
  p{
    .s1{
      color:#333333;
      font-size: 20px;
    }
    .s2{
      color:#999999;
      font-size: 14px;
      padding-left: 12px;
    }
  }
}
.sub_brand_join{
  margin-top: 20px;
  .layui-layer{
    background: transparent!important;
    .layui-layer-setwin{
      a{
        width: 30px!important;
        height: 30px!important;
        background: url("../image/close.png")no-repeat center!important;
        background-size: contain!important;
      }
    }
  }
  .receive_modal{
    width: 687px!important;
    height: 543px;
    background: url("../image/popup/bg.png")no-repeat center;
    background-size: contain;
    .tc-box1{
      width: 639px;
      height: 350px;
      background: white;
      border-radius: 14px;
      margin: 0 auto;
      position: absolute;
      top: 154px;
      left: 50%;
      @include X(-50%);
      .budget-form{
        margin-right: 40px;
        .b1{
          @include font(16px,#666);
          margin-top: 31px;
          margin-bottom: 17px;
          b{
            @include font(18px,#333);
          }
        }
        .hot-line{
          margin-top: 10px;
          @include clear;
          .line-icon {
            background: url(../image/popup/tel.png) no-repeat;
            width: 58px;
            height: 58px;
            float: left;
          }
          .line-phone {
            margin-left: 20px;
            float: left;
            p {
              @include font(16px,#666);
              margin-bottom: 5px;
            }
            strong{
              @include font(28px,$color);
            }
          }
        }
      }
      .figure-info{
        width:199px;
        height:350px;
        background:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%);
        border-radius: 14px 0 0 14px;
        text-align: center;
        h3 {
          @include font(18px,#333);
          padding: 8px 0 6px 0;
        }
        .dec {
          @include font(16px,#666);
        }
        .figure-name{
          margin: 17px 0 10px;
          color: $color;
          border: 1px solid $color;
          border-radius: 16px;
          display: inline-block;
          font-size: 16px;
          padding: 3px 9px;
        }
        .head-img{
          width:116px;
          height:116px;
          background:rgba(254,225,224,1);
          border-radius:50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0 auto;
          margin-top: 39px;
          img{
            @include border-radius(50%);
            @include needContain;
            width: 100px;
            height: 100px;
            background: #fff;
          }
        }
      }
    }
    button{
      height: 67px;
      width: 380px;
      padding-top: 0;
      padding-bottom: 0;
      border-radius: 5px;
      margin-left: -10px;
      display: block;
      background: url("../image/popup/btn2.png")no-repeat center;
      background-size: contain;
      cursor: pointer;
      border: none;
      @include transition(0.3s);
      span{
        color: #fff;
        font-size: 18px;
        display: block;
        margin-top: -12px;
      }
      &:hover{
        opacity: 0.8;
        span{
          color:#fff;
        }
      }
      &:focus{
        box-shadow:none;
      }
    }
    input {
      color: #333;
      font-size: 16px;
      height: 42px;
      border: 1px solid #CCCCCC;
      margin-bottom: 16px;
    }
  }
  .l0{
    width: 293px;
    background:#F4F4F4;
    padding: 23px 20px 20px 20px;
    ul{
      li{
        margin-bottom: 10px;
        p{
          color:#666666;
          font-size: 16px;
          span{
            color:$color;
          }
        }
      }
    }
    .s3{
      margin-top: 25px;
      .left{
        button{
          width: 130px;
          height: 40px;
          background:$color;
          border-radius:6px;
          border-color:$color;
          padding-top:0;
          padding-bottom: 0;
          color:#fff;
          transition: all 0.3s;
          font-size: 18px;
          cursor: pointer;
          &:hover{
            opacity: 0.8;
          }
          span{
            color:#fff;
            font-size: 18px;
          }
        }
      }
      .right{
        button{
          width: 130px;
          height: 40px;
          background:#fff;
          border-radius:6px;
          border:2px solid $color;
          padding-top:0;
          padding-bottom: 0;
          transition: all 0.3s;
          color:$color;
          font-size: 18px;
          cursor: pointer;
          &:hover{
            opacity: 0.8;
          }
          span{
            color:$color;
            font-size: 18px;
          }
        }
      }
    }
  }
  .l1{
    width:293px;
    background:#F4F4F4;
    padding: 23px 20px 20px 20px;
    margin-top: 20px;
    .public_title{
      margin-bottom: 18px;
    }
    ul{
      li{
        padding-bottom: 15px;
        border-bottom: 1px dashed #C1C1C1;
        .m1{
          color:#666666;
          font-size: 14px;
          @include multi-line(2);
          line-height: 24px;
          margin-bottom: 10px;
          margin-top: 12px;
          transition: all 0.3s;
        }
        .m2{
          span{
            color:#999999;
            font-size: 14px;
          }
          .s1{
            width: 75%;
          }
          .s2{
            width: 25%;
          }
        }
      }
    }
  }
  .l2{
    width:293px;
    background: #F4F4F4;
    padding: 23px 20px 20px 20px;
    margin-top: 20px;
    button{
      width: 100%;
      height: 42px;
      margin-top: 19px;
      background:$color;
      border-color:$color;
      transition: all 0.3s;
      &:hover{
        opacity: 0.9;
      }
      span{
        font-size: 16px;
        color:#fff;
      }
    }
    .s3{
      .pic{
        width: 72px;
        height: 72px;
        margin-right: 16px;
        img{
          @include needCover;
          border-radius: 50%;
          border:2px solid #fff;
        }
      }
      .desc{
        width: 192px;
        .d1{
          color:#333333;
          font-size: 16px;
          margin-top: 13px;
          margin-bottom: 6px;
          @include one-line;
        }
        .d2{
          color:#333333;
          font-size: 14px;
          @include one-line;
          span{
            color:$color;
            padding-left: 5px;
            padding-right: 5px;
            font-weight: bolder;
          }
        }
      }
    }
  }
  .l3{
    width:333px;
    background: #fff;
    margin-top: 20px;
    .concern_title{
      p{
        background: #F4F4F4;
        color:#333333;
        font-size: 18px;
        text-align: center;
        display: inline-block;
        line-height: 45px;
        cursor: pointer;
      }
      .selected_title{
        background:$color;
        color:#fff;
        font-weight: bolder;
      }
      .left{
        width: 50%;
      }
      .right{
        width: 50%;
      }
    }
    .concern_content{
      padding: 23px 20px 10px 20px;
      border:2px solid $color;
      box-sizing: border-box;
      ul{
        @include clear;
        li{
          float: left;
          width: 50%;
          margin-bottom: 13px;
          @include one-line;
          cursor: pointer;
          &:hover{
            span{
              color:$color;
            }
          }
          b{
            color:$color;
            font-size: 14px;
            font-family: Impact;
          }
          span{
            color:#333333;
            font-size: 14px;
            padding-left: 8px;
            @include transition(0.3s);
          }
        }
      }
    }
  }
}
.public_title2{
  margin-bottom: 25px;
  border-bottom:1px solid #A6A6A6;
  padding-bottom: 15px;
  padding-top: 23px;
  line-height: 25px;
  p{
    .s1{
      color:#333333;
      font-size: 22px;
      font-weight: bolder;
      position: relative;
      padding-bottom: 20px;
      &:after{
        position: absolute;
        width:100%;
        height:3px;
        background:$color;
        display: block;
        content:'';
        left: 0;
        bottom:0;
      }
    }
    .s2{
      color:#999999;
      font-size: 14px;
      padding-left: 12px;
    }
  }
  .s3{
    color:#999999;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
    background:url(../image/sub_brand/more.jpg)no-repeat right center;
    padding-right: 18px;
    &:hover{
      color:$color;
    }
  }
}
.supports{
  width: 823px;
  padding-left: 14px;
  padding-right: 14px;
  padding-bottom: 12px;
  margin-bottom: 116px;
  .supports_text{
    color:#666;
    font-size: 16px;
    margin-bottom: 26px;
    font-family: "Microsoft YaHei";
    img{
      display: block;
      max-width: 100%!important;
      margin: 10px auto;
    }
  }
  .company_info{
    color:#666;
    font-size: 16px;
    margin-bottom: 26px;
    line-height: 30px;
    font-family: "Microsoft YaHei";
    img{
      display: block;
      max-width: 100%!important;
      margin: 10px auto;
    }
  }
  .company_news{
    ul{
      li{
        @include clear;
        padding-bottom: 24px;
        border-bottom: 1px solid #F3F4F5;
        margin-bottom: 23px;
        cursor: pointer;
        &:hover{
          .pic{
            img{@include scale(1.1);}
          }
          .company_news_desc{
            .cn1{
              color:$color;
              padding-left: 30px;
              &:before{
                width: 18px;
              }
            }
          }
        }
        .pic{
          float: left;
          width: 157px;
          height: 101px;
          overflow: hidden;
          img{
            @include needCover;
            @include transition(0.3s);
          }
        }
        .company_news_desc{
          &.first_new{
            width: 535px;
            .cn1 {
              width: 100%;
              @include multi-line(2);
            }
          }
          float: left;
          margin-left: 15px;
          .cn1 {
            color:#333333;
            font-size: 20px;
            line-height: 24px;
            margin-bottom: 10px;
            margin-top: 10px;
            position: relative;
            @include transition(0.3s);
            &:before{
              position: absolute;
              left: 0;
              width: 0;
              height: 2px;
              background: $color;
              display: block;
              content:'';
              top:10px;
              @include transition(0.3s);
            }
          }
          .cn2{
            color:#666666;
            font-size: 16px;
            small{
              padding-left: 5px;
              padding-right: 5px;
            }
            .cnd1{
              margin-right: 8px;
            }
          }
        }
      }
    }
  }
  .product_list{
    .p0{
      @include clear;
      .p1{
        width: 260px;
        float: left;
        border:2px solid #E0E1E0;
        box-sizing: border-box;
        overflow: hidden;
        margin-right: 7px;
        margin-left: 7px;
        cursor: pointer;
        transition: 0.3s;
        margin-bottom: 14px;
        &:hover{
          border-color:$color;
        }
        .pic{
          width: 256px;
          height: 179px;
          overflow: hidden;
          cursor: url(../image/viewer.png), default;
          img{
            transition: 0.5s;
            @include needCover;
            width: 257px;
            height: 179px;
          }
        }
        .pro_desc{
          text-align: center;
          padding: 13px;
          span{
            display: block;
            @include one-line;
            color:#333333;
            font-size: 16px;
          }
        }
      }
    }
  }
  .program{
    background:$color;
    margin-top: 30px;
    padding: 22px 10px 25px 10px;
    .program_title{
      text-align: center;
      p{
        color:#fff;
        font-size: 32px;
        b{
          letter-spacing: 2px;
        }
      }
      span{
        color:#fff;
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        b{
          font-size: 30px;
          padding-left: 16px;
          padding-right: 16px;
        }
      }
    }
    .program_container{
      margin-top: 17px;
      .left{
        background:#fff;
        width: 422px;
        padding-top: 30px;
        padding-bottom: 16px;
        .layui-form-select dl dd.layui-this{
          background: $color;
        }
        .red_label{
          position: relative;
          padding-left: 5px;

          &:before {
            content: '*';
            font-size: 20px;
            color: $color;
            border-radius: 50%;
            position: absolute;
            top: 14px;
            left: -12px;
            display: block;
          }
        }
        form{
          width: 90%;
          margin: 0 auto;
          .layui-form-item{
            margin-bottom: 12px;
          }
          .layui-form-label{
            padding-left: 0;
            color: #333333;
            font-size: 16px;
            float: left;
            padding: 10px 2px 10px 0;
            text-align: left;
          }
          .layui-input-block{
            margin-left: 82px;
            width: 75%;
          }
          .layui-input-inline{
            width: 75%;
          }
          .layui-form-select{
            margin-bottom: 12px;
          }
        }
        button{
          background: #FF4C53;
          border-radius: 6px;
          border-color: #FF4C53;
          height: 51px;
          line-height: 51px;
          -webkit-transition: all 0.3s;
          transition: all 0.3s;
          color: #fff;
          font-size: 17px;
          font-weight: bolder;
          padding-left: 55px;
          padding-right: 55px;
        }
      }
      .right{
        background:#EFEFEF;
        width: 381px;
        height: 351px;
        .join_person{
          height: 351px;
          .j0{
            padding: 7px 19px;
            @include clear;
            span{
              color:#666666;
              font-size: 14px;
              &.j1{
                display: inline-block;
                width: 60px;
                @include one-line;
                text-align: center;
              }
              &.j2{
                display: inline-block;
                width: 60px;
                @include one-line;
                text-align: center;
              }
              &.j3{
                float: right;
                display: inline-block;
                width: 214px;
                @include one-line;
              }
            }
          }
        }
      }
    }
  }
  .hot_brands{
    margin-top: 30px;
    position: relative;
    .hot_brands_wrapper{
      padding-bottom: 30px;
      .hot_brand_title{
        text-align: center;
        line-height: 35px;
        color:#333;
        font-size: 16px;
        cursor: pointer;
        transition: 0.3s;
        @include one-line;
        &:hover{
          color:$color;
        }
      }
    }
    .swiper-pagination {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        background: #DBDBDB;
        border-radius: 0;
        margin-right: 15px;
        &:focus {
          outline: none;
        }
      }
      .swiper-pagination-bullet-active {
        width: 10px;
        height: 10px;
        border-radius: 0;
        background-color: $color;
      }
    }
  }
  .pub-big-btn{
    width:100%;
    height:32px;
    border:2px solid #E6E6E6;
    border-radius:6px;
    padding-top: 0;
    padding-bottom: 0;
    transition:0.3s;
    margin-bottom: 15px;
    background: transparent;
    cursor: pointer;
    color: #666666;
    font-size: 16px;
    &:focus{
      box-shadow: 0 0 0 2px rgba(255,76,83,.2);
    }
    &:hover{
      border-color:$color;
    }
    span{
      color:#666666;
      font-size: 16px;
    }
  }
}
.sub_brand_footer{
  background:#DCDCDC;
  padding-bottom: 30px;
  .f0{
    margin-bottom: 57px;
    .f1{
      width: 254px;
      height: 264px;
      background:url("../image/sub_brand/footer_bg.png")no-repeat center;
      margin-top: -18px;
      text-align: center;
      .f1_img{
        margin-top: 30px;
        border: 1px solid #E0E0E0;
        width: 180px;
        height: 100px;
      }
      p{
        color:#333333;
        font-size: 18px;
        margin-top: 5px;
        margin-bottom: 10px;
      }
    }
    .f2{
      margin-top: 37px;
      margin-left: 130px;
      ul{
        @include clear;
        li{
          float: left;
          margin-right: 60px;
          padding-right: 60px;
          position: relative;
          &:after{
            position: absolute;
            right: 0;
            top:0;
            width: 1px;
            height: 180px;
            background:#CECECE;
            display: block;
            content:'';
          }
          b{
            display: block;
            color:#333;
            font-size: 16px;
            padding-top: 8px;
            padding-bottom: 12px;
          }
          span{
            display: block;
            color:#333;
            font-size: 14px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: 0.3s;
            &:hover{
              color:$color;
            }
          }
          &:nth-of-type(3){
            margin-right: 0;
            padding-right: 0;
            &:after{
              width: 0;
            }
          }
        }
      }
    }
    .f3{
      margin-left: 107px;
      margin-top: 42px;
      p{
        color:#333;
        font-size: 14px;
        line-height: 24px;
        &:nth-of-type(1){
          margin-bottom: 20px;
        }
      }
    }
  }
  .f4{
    text-align: center;
    width: 1083px;
    p{
      line-height: 22px;
      color:#999;
      font-size: 12px;
    }
  }
}
.budget_modal2{
  padding: 20px 0;
  width: 570px;
  .yg-tc-jmys02{
    h2{
      @include font(18px,#333);
      font-weight: normal;
      text-align: center;
      margin-top: 21px;
      margin-bottom: 12px;
    }
    .jmy1{
      background: #F4F4F4;
      width: 540px;
      margin: 0 auto;
      padding: 13px 15px;
      p{
        &:nth-of-type(1){
          margin-bottom: 5px;
        }
        span{
          @include font(14px,#333);
        }
        em{
          @include font(14px,$color);
        }
      }
    }
    .jmy2{
      text-indent: 35px;
      margin-top: 14px;
      margin-bottom: 14px;
      @include font(16px,#333);
      span{
        @include font(18px,#FAA20D);
        font-weight: bolder;
      }
    }
    .jm3{
      width: 540px;
      margin: 0 auto;
      .left{
        @include font(14px,#666);
      }
      .right{
        @include font(14px,$color);
        cursor: pointer;
        @include transition(0.3s);
        &:hover{
          opacity: 0.8;
        }
      }
    }
    .jm4{
      width: 540px;
      margin: 0 auto;
      margin-top: 18px;
      .pic{
        width: 121px;
        height: 50px;
        border:2px solid #DFDCDF;
        margin-right: 13px;
        margin-bottom: 10px;
        &:nth-of-type(4n){margin-right: 0;}
        img{
          @include needCover;
        }
      }
    }
    .title{
      border-bottom: 1px solid #ddd;
      padding: 0 0 16px 0px;
      width: 95%;
      margin:  0 auto;
      em{
        padding-bottom: 16px;
        border-bottom: 2px solid $color;
        font-size: 16px;
      }
    }
    .fei{
      width: 540px;
      margin: 0 auto 20px;
      border: 1px solid #ddd;
      padding: 5px 0;
      ul{
        @include clear;
        li {
          padding: 0 0 0 20px;
          font-size: 16px;
          float: left;
          line-height: 40px;
          text-align: center;
          width: 240px;
          @include one-line;
          i{
            font-size: 20px;
            color:#FAA20D;
            font-style: normal;
          }
        }
      }
    }
  }
}
.sub_brand_company{
  margin-top: 20px;
  .layui-layer{
    background: transparent!important;
    .layui-layer-setwin{
      a{
        width: 30px!important;
        height: 30px!important;
        background: url("../image/close.png")no-repeat center!important;
        background-size: contain!important;
      }
    }
  }
  .receive_modal{
    width: 687px!important;
    height: 543px;
    background: url("../image/popup/bg.png")no-repeat center;
    background-size: contain;
    .tc-box1{
      width: 639px;
      height: 350px;
      background: white;
      border-radius: 14px;
      margin: 0 auto;
      position: absolute;
      top: 154px;
      left: 50%;
      @include X(-50%);
      .budget-form{
        margin-right: 40px;
        .b1{
          @include font(16px,#666);
          margin-top: 31px;
          margin-bottom: 17px;
          b{
            @include font(18px,#333);
          }
        }
        .hot-line{
          margin-top: 10px;
          @include clear;
          .line-icon {
            background: url(../image/popup/tel.png) no-repeat;
            width: 58px;
            height: 58px;
            float: left;
          }
          .line-phone {
            margin-left: 20px;
            float: left;
            p {
              @include font(16px,#666);
              margin-bottom: 5px;
            }
            strong{
              @include font(28px,$color);
            }
          }
        }
      }
      .figure-info{
        width:199px;
        height:350px;
        background:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%);
        border-radius: 14px 0 0 14px;
        text-align: center;
        h3 {
          @include font(18px,#333);
          padding: 8px 0 6px 0;
        }
        .dec {
          @include font(16px,#666);
        }
        .figure-name{
          margin: 17px 0 10px;
          color: $color;
          border: 1px solid $color;
          border-radius: 16px;
          display: inline-block;
          font-size: 16px;
          padding: 3px 9px;
        }
        .head-img{
          width:116px;
          height:116px;
          background:rgba(254,225,224,1);
          border-radius:50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0 auto;
          margin-top: 39px;
          img{
            @include border-radius(50%);
            @include needContain;
            width: 100px;
            height: 100px;
            background: #fff;
          }
        }
      }
    }
    button{
      height: 67px;
      width: 380px;
      padding-top: 0;
      padding-bottom: 0;
      border-radius: 5px;
      margin-left: -10px;
      display: block;
      background: url("../image/popup/btn2.png")no-repeat center;
      background-size: contain;
      cursor: pointer;
      border: none;
      @include transition(0.3s);
      span{
        color: #fff;
        font-size: 18px;
        display: block;
        margin-top: -12px;
      }
      &:hover{
        opacity: 0.8;
        span{
          color:#fff;
        }
      }
      &:focus{
        box-shadow:none;
      }
    }
    input {
      color: #333;
      font-size: 16px;
      height: 42px;
      border: 1px solid #CCCCCC;
      margin-bottom: 16px;
    }
  }
  .l0{
    width:277px;
    background:#F4F4F4;
    padding: 23px 20px 20px 20px;
    .evaluate{
      ul{
        li{
          padding-bottom: 17px;
          border-bottom: 1px solid #E5E5E5;
          margin-bottom: 17px;
          .comment{
            font-size: 14px;
            margin-right: 5px;
            &.comment1{
              color: $color;
            }
            &.comment2{
              color: #FEA711;
            }
            &.comment3{
              color: #C4C4C4;
            }
          }
          .content{
            color:#666666;
            font-size: 14px;
          }
          .date {
            color: #999;
            font-size: 14px;
            float: right;
          }
        }
      }
      .write_comments{
        text-align: center;
        width: 100%;
        height: 36px;
        background: #fff;
        border:2px solid $color;
        box-sizing: border-box;
        cursor: pointer;
        margin-top: 23px;
        margin-bottom: 24px;
        span{
          line-height: 32px;
          background:url("../image/sub_brand/write.png")no-repeat left center;
          color:$color;
          font-size: 14px;
          padding-left: 26px;
        }
      }
      .e1{
        &>span{
          color: $color;
          font-size: 14px;
        }
        .ivu-progress-success{
          .ivu-progress-bg{
            background: $color;
          }
          .ivu-progress-text {
            color: $color;
          }
        }
      }
      .e2{
        &>span{
          color: #FEA711;
          font-size: 14px;
        }
        .ivu-progress-bg{
          background: #FEA711;
        }
        .ivu-progress-text {
          color: #FEA711;
        }
      }
      .e3{
        &>span{
          color:#C4C4C4;
          font-size: 14px;
        }
        .ivu-progress-bg{
          background: #C4C4C4;
        }
        .ivu-progress-text {
          color: #C4C4C4;
        }
      }
    }
    .ivu-progress-inner{
      background: #eaeaea;
    }
  }
  .l2{
    width: 277px;
    background:#F4F4F4;
    padding: 23px 20px 20px 20px;
    margin-top: 20px;
    ul{
      margin-top: 15px;
      li{
        color:#333;
        font-size: 14px;
        line-height: 30px;
      }
    }
  }
  .l3{
    width: 317px;
    background: #fff;
    margin-top: 20px;
    .concern_title{
      p{
        background: #F4F4F4;
        color:#333333;
        font-size: 18px;
        text-align: center;
        display: inline-block;
        line-height: 45px;
        cursor: pointer;
      }
      .selected_title{
        background:$color;
        color:#fff;
        font-weight: bolder;
      }
      .left{
        width: 50%;
      }
      .right{
        width: 50%;
      }
    }
    .concern_content{
      padding: 23px 20px 10px 20px;
      border:2px solid $color;
      box-sizing: border-box;
      ul{
        @include clear;
        li{
          float: left;
          width: 50%;
          margin-bottom: 13px;
          @include one-line;
          cursor: pointer;
          &:hover{
            span{
              color:$color;
            }
          }
          b{
            color:$color;
            font-size: 14px;
            font-family: Impact;
          }
          span{
            color:#333333;
            font-size: 14px;
            padding-left: 8px;
            @include transition(0.3s);
          }
        }
      }
    }
  }
}
.sub_title{
  margin-bottom: 20px;
  border-bottom:1px solid #E4E4E4;
  padding-bottom: 15px;
  p{
    .s1{
      color:#333333;
      font-size: 20px;
    }
    .s2{
      color:#999999;
      font-size: 14px;
      padding-left: 12px;
    }
  }
}
.sub_title2{
  margin-bottom: 25px;
  border-bottom:1px solid #A6A6A6;
  padding-bottom: 15px;
  padding-top: 23px;
  line-height: 25px;
  p{
    .s1{
      color:#333333;
      font-size: 22px;
      font-weight: bolder;
      position: relative;
      padding-bottom: 20px;
      &:after{
        position: absolute;
        width:100%;
        height:3px;
        background:$color;
        display: block;
        content:'';
        left: 0;
        bottom:0;
      }
    }
    .s2{
      color:#666;
      font-size: 14px;
      padding-left: 12px;
    }
  }
  .s3{
    color:#999999;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
    background:url(../image/sub_brand/more.jpg)no-repeat right center;
    padding-right: 18px;
    &:hover{
      color:$color;
    }
  }
}
.com_info {
  width: 835px;
  padding-left: 14px;
  padding-right: 14px;
  padding-bottom: 12px;
  margin-bottom: 116px;
  .com_info_text {
    color: #666;
    font-size: 16px;
    margin-bottom: 23px;
    line-height: 30px;
    img{
      display: block;
      max-width: 100%!important;
      margin: 10px auto;
    }
  }
  .certify_info{
    @include clear;
    width: 100%;
    height: 86px;
    border:3px solid #DCDCDC;
    border-radius:6px;
    margin-bottom: 15px;
    .c1{
      float:left;
      background:url(../image/sub_brand/icon.png)no-repeat left center;
      padding-left: 54px;
      margin-left: 25px;
      margin-top: 10px;
      margin-right: 70px;
      b{
        color:#003D86;
        font-size: 26px;
        display: block;
      }
      small{
        color:#003D86;
        font-size: 16px;
        display: block;
      }
    }
    .c2{
      float: left;
      width: 50%;
      li{
        line-height: 40px;
        margin-right: 50px;
        padding-left: 25px;
        float: left;
        color:#666666;
        font-size: 16px;
        background:url(../image/sub_brand/icon1.png)no-repeat left center;
        &:nth-of-type(2),&:nth-of-type(4){margin-right: 0;}
      }
    }
  }
  .intelligence{
    ul{
      li{
        float: left;
        margin-right: 10px;
        margin-bottom: 16px;
        text-align: center;
        width: 130px;
        &:nth-of-type(6n){margin-right: 0;}
        div{
          width: 70px;
          height: 70px;
          margin: 0 auto;
          img{
            @include needCover;
            border-radius: 50%;
          }
        }
        span{
          display: block;
          color:#666;
          font-size: 14px;
          height: 34px;
          line-height: 34px;
          @include one-line;
        }
      }
    }
  }
  .company_pic{
    .c0{
      &>div{
        width:195.5px;
        height:152px;
        border:1px solid #E2E2E2;
        margin-right: 15px;
        margin-bottom: 15px;
        transition: 0.3s;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: url(../image/viewer.png), default;
        &:hover{
          border-color:$color;
        }
        &:nth-of-type(4n){margin-right:0;}
        .pic{
          width: 93%;
          height: 93%;
          img{
            @include needCover;
          }
        }
      }
    }
  }
}
.certified_banner{
  padding-top: 20px;
  height: 400px;
  width: 100%;
  .left{
    width: 317px;
    height: 363px;
    background:url("../image/sub_brand/white_bg.png")no-repeat bottom;
    background-size: cover;
    .certified_brand{
      background:url("../image/sub_brand/brand.png")no-repeat left center;
      height: 102px;
      width: 100%;
      background-size: cover;
    }
    .certified_text{
      padding: 20px 24px 20px 24px;
      p{
        color:#333;
        font-size: 16px;
        margin-bottom: 7px;
      }
    }
    .certified_btn{
      padding: 0 24px;
      @include clear;
      .b1{
        float: left;
        background: #FF4C53;
        border:2px solid #FF4C53;
        color:#fff;
      }
      .b2{
        float: right;
        border:2px solid #FF4C53;
        box-sizing: border-box;
        background:transparent;
        color:$color;
        span{
          color:$color;
        }
      }
      button{
        padding: 6px 15px;
        transition: 0.3s;
        border-radius: 5px;
        font-size: 15px;
        i{
          margin-right: 5px;
        }
        &:hover{
          opacity: 0.8;
        }
      }
    }
  }
  .right{
    width: 883px;
    height: 363px;
    img{@include needCover;}
  }
}
.yg-com-info{
  border-top:2px solid #dfdfdf;
  .ivu-page-item-active{
    border-color:$color;
    a{color:$color;}
  }
  .ivu-page-item:hover {
    border-color:$color;
    a{color:$color;}
  }
  .ivu-page-item-jump-next:hover{
    a{
      color:$color;
    }
  }
  .ivu-page-prev:hover{
    border-color:$color;
    a{color:$color;}
  }
  .ivu-page-options-elevator:hover{
    input{border-color:$color;}
  }
  .ivu-page-options-elevator input:focus {
    border-color: $color;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(255,76,83,.2);
  }
  .ivu-page-next:hover{
    border-color:$color;
    a{color:$color;}
  }
  .hd{
    padding: 30px 0;
    .inner_brand_product{
      i{
        width: 51px;
        height: 76px;
        background: url(../image/sub_brand/brand_info.png) left center no-repeat;
        display: block;
      }
      h2{
        color: #333333;
        font-size: 42px;
        line-height: 76px;
        margin-left: 18px;
        margin-right: 30px;
      }
      .sub_brand_logo{
        box-shadow: 0 0 20px #b3b3b3;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 4px;
      }
      .ibp1{
        color:#3097FD;
        font-size: 12px;
        margin-top: 17px;
        transition: 0.3s;
        cursor: pointer;
        display: block;
        &:hover{
          opacity: 0.8;
        }
      }
      .ibp2{
        span{
          color:#333333;
          font-size: 12px;
          margin-right: 19px;
          em{
            color:#FF4C53;
            font-size: 16px;
            font-weight: bolder;
          }
        }
      }
    }
    .p_content{
      color: #666;
      font-size: 16px;
      line-height: 28px;
      margin-top: 24px;
      img{
        display: block;
        max-width: 100%!important;
        margin: 10px auto;
      }
    }
    .check_more{
      color:#666666;
      font-size: 16px;
      border:1px solid #E6E6E6;
      display: inline-block;
      padding: 5px 13px;
      cursor: pointer;
      transition: 0.3s;
      &:hover{
        border-color:$color;
      }
    }
  }
}
.xiaoguo_wrapper{
  padding: 20px 13px;
  .effect{
    border:2px solid #E6E6E6;
    margin-bottom: 20px;
    .left{
      width:171px;
      height:43px;
      text-align: center;
      line-height: 43px;
      background:$color;
      color:#fff;
      font-size: 15px;
      display: inline-block;
    }
    .right{
      color:#666;
      font-size: 16px;
      line-height: 43px;
      padding-right: 15px;
      span{
        color:$color;
      }
    }
  }
  .xiaoguo_ul{
    .xiaoguo_li{
      width: 282px;
      border: 2px solid #E0E1E0;
      margin-right: 15px;
      margin-bottom: 15px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      transition: 0.3s;
      cursor: pointer;
      &:hover{border-color:$color;}
      &:nth-of-type(4n){margin-right: 0;}
      .pic{
        width: 278px;
        height: 203px;
        overflow: hidden;
        cursor: url(../image/viewer.png), default;
        img{
          @include needCover;
        }
      }
      span{
        font-size: 16px;
        color: #333;
        width: 95%;
        margin: 10px auto;
        display: block;
        @include one-line;
        text-align: center;
      }
    }
  }
}
.hot_search_pic{
  margin-top: 16px;
  padding: 16px;
  .inner_brand_title2{
    border-bottom: 2px solid #E5E5E5;
    margin-bottom: 20px;
    .s1{
      color:#333333;
      font-size: 22px;
      font-weight: bolder;
      display: block;
      height: 39px;
      position: relative;
      line-height: 22px;
      &:after{
        position: absolute;
        height: 3px;
        width: 100%;
        bottom:-2px;
        display: block;
        background:$color;
        content:'';
      }
    }
  }
  .hot_search_ul{
    .hot_search_li{
      width: 20%;
      margin-bottom: 10px;
      cursor: pointer;
      &:hover{
        span{
          color:$color;
        }
      }
      span{
        color: #333;
        font-size: 16px;
        display: block;
        @include one-line;
        transition: 0.3s;
      }
    }
  }
}